<template>
  <div
    class="offcanvas offcanvas-start w-75"
    tabindex="-1"
    id="offcanvasExample"
    aria-labelledby="offcanvasExampleLabel"
    data-bs-backdrop="static"
  >
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">商品列表</h5>
      <button
        type="button"
        class="btn-close"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
      ></button>
    </div>

    <div class="offcanvas-body">
      <form class="row g-3 needs-validation">
        <table class="table table-striped">
          <thead>
            <tr>
              <th scope="col">
                <input class="form-check-input me-1" type="checkbox" value="" id="invalidCheck" />
                <span>全选</span>
              </th>
              <th scope="col" style="width: 20%">名称</th>
              <th scope="col" style="width: 30%">信息</th>
              <th scope="col" style="width: 30%">剩余</th>
              <th scope="col" style="width: 20%">购买数量</th>
              <th scope="col" style="width: 10%">单价</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in products" :key="item.key">
              <th scope="row" class="align-middle">
                <input
                  type="checkbox"
                  class="form-check-input"
                  :value="item.key"
                  :checked="item.key === formData[index]?.id || false"
                  @change="
                    (e) => {
                      if (e.target.checked) {
                        formData[index] = item
                      } else {
                        formData[index] = []
                      }
                    }
                  "
                />
              </th>
              <td class="align-middle">{{ item.name }}</td>
              <td class="align-middle">{{ item.info }}</td>
              <td class="align-middle">
                {{ item.sl - item.buysl }}
              </td>
              <td class="align-middle">
                <input
                  type="number"
                  step="1"
                  pattern="\d*"
                  class="form-control"
                  placeholder="数量"
                  aria-label="数量"
                  :value="item.buysl || 1"
                  @input="(e) => inputsl(e, index)"
                />
              </td>

              <td class="align-middle">{{ item.cost }}￥</td>
            </tr>
          </tbody>
        </table>
      </form>
      <button
        type="button"
        class="btn btn-primary"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
        @click="handleClick"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watchEffect, watch } from 'vue'

const emit = defineEmits(['inFocus', 'submit', 'buy'])

const products = ref([
  {
    key: '1',
    name: '电脑1',
    info: 'XXXX',
    sl: 12,
    cost: 122,
    buysl: 1
  },
  {
    key: '2',
    name: '电脑2',
    info: 'XXXX',
    sl: 4,
    cost: 1322,
    buysl: 1
  },
  {
    key: '3',
    name: '电脑3',
    info: 'XXXX',
    sl: 18,
    cost: 27,
    buysl: 1
  },
  {
    key: '4',
    name: '电脑4',
    info: 'XXXX',
    sl: 18,
    cost: 27,
    buysl: 1
  }
])

const formData = ref([])
const inputsl = (e, index) => {
  const number = e.target.value
  products.value[index].buysl = number
}
watch(
  () => formData.value,
  () => {
    console.log('watch', formData.value)
  },
  {
    deep: true
  }
)

const handleClick = () => {
  emit('buy', formData.value)
}
</script>

<style lang="scss" scoped></style>
